﻿<div class="book-card card1">
    <div v-if="title" class="card-header">
        <h3 v-bind:style="{color:color}"><i v-bind:style="{backgroundColor:color}"></i><span>{{title}}</span></h3>
        <a v-bind:style="{color:color}" v-if="more" class="more" v-on:click="showMore()" v-bind:href="more">
            更多
            <svg x="0px" y="0px" width="10px" height="10px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
            <path v-bind:fill="color" d="M15.5,10c0-0.3-0.1-0.5-0.3-0.7l-8-8c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l7.3,7.3l-7.3,7.3c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l8-8C15.4,10.5,15.5,10.3,15.5,10z" /></svg>
        </a>
    </div>
    <div class="slider">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="book in imgBooks">
                    <a href="javascript:void(0);" v-on:click="read(book)"><img v-bind:src="book.imgUrl" v-bind:alt="book.imgUrl" /></a>
                </div>
            </div>
            <div class="swiper-pagination">
                <span class="title">{{imgBooks[current].title}}</span>
                <span class="size">{{current+1}} / {{imgBooks.length}}</span>
            </div>
        </div>
    </div>
    <ul>
        <li v-for="book in textBooks"><a href="javascript:void(0);" v-on:click="read(book)">{{book.title}}</a></li>
    </ul>
</div>